<template>
  <view class="container">
    <!-- 未登录的信息 -->
    <image class="headerbg" src="../../static/images/mybg.png" mode=""></image>
    <image class="closeimg" src="../../static/images/closedown.png" mode="" @click="$refs.logout.open()"></image>
    <view style="position: absolute; top: 60rpx; left: 100rpx; color: #fff; font-size: 36rpx; margin-left: 30rpx">个人中心</view>
    <view v-if="token == ''"><button class="login" @click="gologin">手机号授权登录</button></view>
    <!-- 登录完之后的信息 -->
    <view class="userinfo" v-else @click="gouserinfo">
      <image class="avatar" :src="userinfo.avatar" mode=""></image>
      <view style="margin-left: 20rpx">
        <view style="color: #fff; font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin-bottom: 20rpx; width: 300rpx">{{ userinfo.nickname }}</view>
        <view style="color: #fff; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">{{ userinfo.mobile }}</view>
      </view>
      <uni-icons type="right" size="20" color="#fff" style="margin-left: 160rpx"></uni-icons>
    </view>
    <view class="item" @click="$refs.phone.open()">
      <view>平台电话</view>
      <uni-icons type="right" size="20"></uni-icons>
    </view>
    <view class="item" @click="goaboutour">
      <view>关于我们</view>
      <uni-icons type="right" size="20"></uni-icons>
    </view>
    <view class="item" @click="gouserservice">
      <view>用户服务协议</view>
      <uni-icons type="right" size="20"></uni-icons>
    </view>
    <view class="item" @click="gouserprofile">
      <view>隐私政策</view>
      <uni-icons type="right" size="20"></uni-icons>
    </view>
    <uni-popup ref="phone" type="bottom">
      <view class="phone">
        <view class="phoneitem" @click="callkefu(obj.service)">客服1：{{ obj.service }}</view>
        <view class="phoneitem" @click="callkefu(obj.holiday_service)">节假日客服：{{ obj.holiday_service }}</view>
        <view class="phoneitem" @click="callkefu(obj.hours_service)">24小时客服：{{ obj.hours_service }}</view>
        <view class="phoneitem" @click="$refs.phone.close()">取消</view>
      </view>
    </uni-popup>
    <uni-popup ref="logout" type="center">
      <view class="logout">
        <view style="text-align: center; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #000000; margin-bottom: 78rpx">提示</view>
        <view style="text-align: center; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #000000">确认退出该账号？</view>
        <view class="btngroup">
          <view class="cancelbtn" @click="$refs.logout.close()">取消</view>
          <view class="okbtn" @click="fnok">确认</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      token: '',
      obj: {}
    };
  },
  onLoad() {
    // 获取本地token
    this.token = uni.getStorageSync('token');
    console.log(this.token);
    this.getkefuphone();
  },
  onShow() {
    this.getuserinfo();
    this.token = uni.getStorageSync('token');
  },

  methods: {
    // 获取客服手机号
    async getkefuphone() {
      const res = await uni.$http.get('common/init');
      console.log(res.data.data);
      this.obj = res.data.data;
    },
    // 跳转到登录页
    gologin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    // 获取个人信息
    async getuserinfo() {
      uni.request({
        // url: 'https://health.jiangkukeji.cn/api/user/index', // 测试使用
        url: 'https://www.gansuyiliao.cn/api/user/index', // 正式使用
        method: 'POST',
        header: {
          token: uni.getStorageSync('token')
        },
        success: (res) => {
          console.log('个人信息----', res);
          this.userinfo = res.data.data;
        }
      });
    },
    // 用户点击登录
    getusernumbertoken(e) {
      if (!e.detail.code) {
        uni.showToast({
          title: '获取手机号失败',
          icon: 'none'
        });
        return false;
      }
      console.log(e.detail);
      uni.login({
        success: async (res) => {
          console.log(res);
          // 调取登录接口
          uni.request({
            // url: 'https://health.jiangkukeji.cn/api/user/mobilelogin', // 测试使用
            url: 'https://www.gansuyiliao.cn/api/user/mobilelogin', // 正式使用
            method: 'POST',
            data: {
              code: res.code, // login的code
              encrypted_data: e.detail.encryptedData, // 用户信息
              iv: e.detail.iv,
              phone_code: e.detail.code
            },
            success: (res2) => {
              this.userinfo = res2.data.data.userinfo;
              uni.setStorageSync('token', res2.data.data.userinfo.token);
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          });
        }
      });
    },
    // 点击拨打客服电话
    callkefu(phone) {
      console.log(phone);
      uni.makePhoneCall({
        phoneNumber: phone
      });
    },
    // 跳转到编辑信息页面
    gouserinfo() {
      uni.navigateTo({
        url: '/sub_my/userinfo/userinfo'
      });
    },
    // 点击确定退出登陆
    fnok() {
      uni.clearStorage('token');
      this.$refs.logout.close();
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    // 跳转到关于我们
    goaboutour() {
      uni.navigateTo({
        url: '/sub_my/aboutour/aboutour'
      });
    },
    // 跳转到用户协议
    gouserprofile() {
      uni.navigateTo({
        url: '/sub_my/userprofile/userprofile'
      });
    },
    //跳转到用户服务
    gouserservice() {
      uni.navigateTo({
        url: '/sub_my/userservice/userservice'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .headerbg {
    position: relative;
    width: 750rpx;
    height: 430rpx;
  }
  .closeimg {
    position: absolute;
    width: 56rpx;
    height: 56rpx;
    top: 60rpx;
    left: 40rpx;
  }
  .login {
    position: absolute;
    width: 650rpx;
    height: 90rpx;
    top: 200rpx;
    left: 50rpx;
    text-align: center;
    line-height: 90rpx;
    color: #0274f9;
    background: #ffffff;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  .item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750rpx;
    height: 130rpx;
    background: #ffffff;
    padding: 46rpx 33rpx 44rpx 48rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .userinfo {
    position: absolute;
    display: flex;
    align-items: center;
    top: 200rpx;
    left: 50rpx;
    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
  .phone {
    width: 750rpx;
    height: 480rpx;
    text-align: center;
    .phoneitem {
      width: 750rpx;
      height: 120rpx;
      text-align: center;
      line-height: 120rpx;
      background: #ffffff;
    }
  }
  .logout {
    box-sizing: border-box;
    width: 690rpx;
    height: 400rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding-top: 30rpx;
    .btngroup {
      display: flex;
      margin-top: 74rpx;
      margin-left: 56rpx;
      .cancelbtn {
        width: 300rpx;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        background: #f1f1f1;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
      .okbtn {
        width: 300rpx;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        background: #0278f9;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
    }
  }
}
</style>
